<template>
  <div id="window1">

    <!--              头部：标题-->
    <div style="padding: 5px">
      <el-row>
        <!--        标题-->
        <el-col :span="17" style="text-align: right;">今日矛盾纠纷数据统计</el-col>
        <!--        关闭按钮-->
        <el-col :span="7" style="text-align: right;">
          <div>
            <el-popconfirm title="是否关闭该窗口" @confirm="closeWindow">
              <template #reference>
                <el-icon>
                  <CircleClose/>
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--              次标题-->
    <div style="display: flex; justify-content: space-between;margin: 0 10px">
      <div style="flex: 1;text-align: left;">地区：甘肃</div>
      <div style="flex: 1; text-align: right;">时间段：2018-06-14</div>
    </div>

    <!--              主体-->

    <div style="margin: 12px; font-size: 12px; background-color: rgba(0, 0, 0, 0.3); color: white;">
      <el-row :gutter="2">
        <el-col :span="6">
          <el-card style="background-color: inherit;">
            <div style="color: white;">矛盾纠纷</div>
            <h2 style="color: white;">54</h2>
            <div style="color: white;">环比2%</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="background-color: inherit;">
            <div style="color: white;">已调节</div>
            <h2 style="color: white;">54</h2>
            <div style="color: white;">环比3%</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="background-color: inherit;">
            <div style="color: white;">调节中</div>
            <h2 style="color: white;">4</h2>
            <div style="color: white;">环比3%</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="background-color: inherit;">
            <div style="color: white;">未调节</div>
            <h2 style="color: white;">4</h2>
            <div style="color: white;">环比3%</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'

//const { handleClose } = defineProps(['handleClose'])
const emit = defineEmits()

const closeWindow = () => {
  emit('closeWindow')
}
</script>


<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>